import { ref, markRaw, reactive } from 'vue'
import { setData } from 'el-plus-powerful-table-ts/es'
import { Edit, Remove, Connection } from '@element-plus/icons-vue'
import type { PowerfulTableHeader } from 'el-plus-powerful-table-ts'

export type Model = {
  name: string
  accountUuid: string
  password: string
  email: string
  mobileNumber: string
  accountState: number
  createTime: number
  creatorName: string
  updateName: string
  updateTime: number
}

interface PowerfulTableData {
  list: Model[]
  header: any[]
  total: number
  listQuery: {
    pageNum: number
    pageSize: number
    name?: string
  }
}

export const defaultData = () => ({
  name: '',
  accountUuid: '',
  password: '',
  email: '',
  mobileNumber: '',
  accountState: 1,
  createTime: 0,
  creatorName: '',
  updateName: '',
  updateTime: 0,
})

export const useData = <Row = any>() => {
  const header: PowerfulTableHeader<Row>[] = [
    {
      label: '用户', //显示的名称
      overflowTooltip: true,
      headerAlign: 'left',
      props: [
        {
          prop: 'name',
        },
      ],
    },
    {
      label: '账号状态', //显示的名称
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'accountState',
        },
      ],
    },
    //
    {
      label: "账号所属方",
      width: 200,
      props: [
        {
          prop: 'accountOwnerName',
        },
      ],
    },
    {
      label: '账号类型', //显示的名称
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'accountType',
        },
      ],
    },
    {
      label: '手机号', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'mobileNumber',
        },
      ],
    },
    {
      label: '邮箱', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'email',
        },
      ],
    },
    {
      label: '添加时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'createTime',
        },
      ],
    },
    {
      label: '更新时间', //显示的名称
      width: 180,
      headerAlign: 'left',
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'updateTime',
        },
      ],
    },
    {
      label: '创建人', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'creatorName',
        },
      ],
    },
    {
      label: '操作', //显示的标题
      fixed: 'right',
      headerAlign: 'left',
      minWidth: '260px',
      props: [
        {
          type: 'btn',
          prop: '',
          data: setData<'btn'>([
            {
              text: '关联车型',
              params: 'bindModel',
              property: {
                type: 'primary',
                plain: true,
                size: "small",
                icon: markRaw(Connection),
              },
            },
            {
              text: '编辑',
              params: 'edit',
              property: {
                type: 'primary',
                size: "small",
                icon: markRaw(Edit),
              },
            },
            {
              text: '删除',
              params: 'remove',
              property: {
                type: 'danger',
                size: "small",
                icon: markRaw(Remove),
              },
            },
          ]),
        },
      ],
    },
  ]
  // 编辑区显隐
  const isDialog = ref(false)

  // 弹窗开关
  const switchs = reactive({
    role: false,
    edit: false,
  })

  const powerfulTableData: PowerfulTableData = reactive({
    list: [],
    header: header,
    total: 0,
    listQuery: {
      pageNum: 1,
      pageSize: 10,
      brandName: '',
    },
  })


  // row 数据
  const currentForm = ref<Model>(defaultData())

  // 品牌列表
  const listData = ref<{ label: string; value: string }[]>([])

  return {
    header,
    switchs,
    isDialog,
    powerfulTableData,
    currentForm,
    listData,
  }
}
